<template>
	<view class="container">
		<view class="main">
			<view class="header">
				<view class="avatar">
					<image :src="userInfo.avatar" mode=""></image>
				</view>
				<view class="avatar-text">
					<view class="nickname">
						<text class="name">{{userInfo.username}}</text>
						<view class="vipLev" v-if="userInfo.level">
							<image v-if="userInfo.level === 1" src="../../../static/images/vipY.png" mode=""></image>
							<image v-if="userInfo.level === 2" src="../../../static/images/vipGlod.png" mode=""></image>
						</view>
					</view>
					<view class="inviteCode">
						<text class="codeText">邀请码：{{userInfo.code}}</text> <text class="codeBtn" @click="clipboard">复制</text>
					</view>
				</view>
			</view>
			<view class="helpSlogn">
				<view class="helpLeft">
					<image src="../../../static/images/help-icon.png" mode="widthFix"></image>
					<text>帮好友解决互助烦恼</text>
				</view>
				<view class="helpInvite">
					立即邀请
				</view>
			</view>
			<view class="navUl">
				<view class="navLi" @click="goNav" :data-nav="0">
					<view class="navLi-l">
						<view class="icontit">
							<image src="../../../static/images/centerNav1.png" mode=""></image>
						</view>
						<view class="title">
							我的接单
						</view>
					</view>
					<view class="navLi-icon">
						<text class="iconfont iconjiantou"></text>
					</view>
				</view>
				<view class="navLi" @click="goNav" :data-nav="1">
					<view class="navLi-l">
						<view class="icontit">
							<image src="../../../static/images/centerNav2.png" mode=""></image>
						</view>
						<view class="title">
							我的任务
						</view>
					</view>
					<view class="navLi-icon">
						<text class="iconfont iconjiantou"></text>
					</view>
				</view>
				<view class="navLi" @click="goNav" :data-nav="2">
					<view class="navLi-l">
						<view class="icontit">
							<image src="../../../static/images/centerNav3.png" mode=""></image>
						</view>
						<view class="title">
							我的钱包
						</view>
					</view>
					<view class="navLi-icon">
						<text class="iconfont iconjiantou"></text>
					</view>
				</view>
				<view class="navLi" @click="goNav" :data-nav="3">
					<view class="navLi-l">
						<view class="icontit">
							<image src="../../../static/images/centerNav4.png" mode=""></image>
						</view>
						<view class="title">
							我的消息
						</view>
					</view>
					<view class="navLi-icon">
						<text class="iconfont iconjiantou"></text>
					</view>
				</view>
				<view class="navLi" @click="goNav" :data-nav="4">
					<view class="navLi-l">
						<view class="icontit">
							<image src="../../../static/images/centerNav5.png" mode=""></image>
						</view>
						<view class="title">
							用户须知
						</view>
					</view>
					<view class="navLi-icon">
						<text class="iconfont iconjiantou"></text>
					</view>
				</view>
				<view class="navLi" @click="goNav" :data-nav="5">
					<view class="navLi-l">
						<view class="icontit">
							<image src="../../../static/images/centerNav6.png" mode=""></image>
						</view>
						<view class="title">
							设置中心
						</view>
					</view>
					<view class="navLi-icon">
						<text class="iconfont iconjiantou"></text>
					</view>
				</view>
			</view>
		</view>
		<myTabar :current="4" @tabBarClick="tabbarSwitch"></myTabar>
		<tui-bottom-popup class="tui-task-bottom" :zIndex="10000" :maskZIndex="9999" :show="popupShow" @close="popup">
			<view class="tui-task">
				<view class="tui-task-title">选择任务类型</view>
				<view class="taskMain">
					<tui-grid :unlined="true" v-if="popupInShow">
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp">
								<view class="tui-grid-icon">
									<image src="../../../static/images/nav1.png" mode=""></image>
								</view>
								<text class="tui-grid-label">京东金融</text>
							</view>
						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp delay200">
								<view class="tui-grid-icon">
									<image src="../../../static/images/nav2.png" mode=""></image>
								</view>
								<text class="tui-grid-label">滴滴</text>
							</view>
						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false" @click="publish">
							<view class="bounceInUp delay400">
								<view class="tui-grid-icon">
									<image src="../../../static/images/nav3.png" mode=""></image>
								</view>
								<text class="tui-grid-label">拼多多</text>
							</view>

						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp delay100">
								<view class="tui-grid-icon">
									<image src="../../../static/images/nav4.png" mode=""></image>
								</view>
								<text class="tui-grid-label">京东</text>
							</view>

						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp delay300">
								<view class="tui-grid-icon">
									<image src="../../../static/images/nav5.png" mode=""></image>
								</view>
								<text class="tui-grid-label">快手</text>
							</view>

						</tui-grid-item>
						<tui-grid-item :cell="3" backgroundColor="rgba(0,0,0,0)" :bottom="false">
							<view class="bounceInUp delay500">
								<view class="tui-grid-icon">
									<image src="../../../static/images/nav6.png" mode=""></image>
								</view>
								<text class="tui-grid-label">淘宝</text>
							</view>

						</tui-grid-item>
					</tui-grid>
				</view>
				<view class="tui-btn-cancle" @tap="popup">
					<image src="../../../static/images/close.png" mode=""></image>
				</view>
			</view>
		</tui-bottom-popup>

	</view>
</template>

<script>
	const thorui = require("@/components/common/tui-clipboard/tui-clipboard.js")
	import myTabar from "@/components/myTabar/index.vue"
	export default {
		components: {
			myTabar
		},
		data() {
			return {
				popupShow: false,
				popupInShow: false,
				code: 'epbLqlxt',
				height: 128,
				userInfo:{}
			}
		},
		onReady() {},
		mounted() {
		this.userInfo = uni.getStorageSync("userInfo")
		console.log(this.userInfo)
		},
		methods: {
			goNav(e) {
				let nav = parseInt(e.currentTarget.dataset.nav);
				switch (nav) {
					case 0:
						uni.navigateTo({
							url: "/pages/center/myOrder/myOrder"
						})
						break;
					case 1:
						uni.navigateTo({
							url: "/pages/center/myTask/myTask"
						})
						break;
					case 3:
						uni.navigateTo({
							url: "/pages/center/message/index"
						})
						break;
					case 4:
						uni.navigateTo({
							url: "/pages/center/notice/index"
						})
						break;
					case 5:
						uni.navigateTo({
							url: "/pages/center/settings/index"
						})
						break;
					default:
						break;
				}
			},
			tabbarSwitch(e) {
				//获取登录状态，此处默认未登录
				let isLogin = uni.getStorageSync("isLogin");
				if (e.verify && !isLogin) {
					// this.tui.toast('您还未登录，请先登录');
					this.current = e.index;
					uni.reLaunch({
						url:"/pages/login/login"
					})
				} else {
					if (!e.hump) {
						this.current = e.index;
						uni.reLaunch({
							url: e.pagePath
						})
					} else {
						this.popupShow = !this.popupShow
						this.popupInShow = !this.popupInShow
					}
				}
			},
			popup() {
				this.popupShow = !this.popupShow
				setTimeout(() => {
					this.popupInShow = !this.popupInShow
				}, 100)
			},
			publish() {
				uni.navigateTo({
					url: "/pages/task/pdd/index"
				})
			},
			clipboard: function(event) {
				let data = this.code;
				thorui.getClipboardData(data, (res) => {
					// #ifdef H5 || MP-ALIPAY
					if (res) {
						uni.showToast({
							title: '复制成功',
							icon: "none"
						});
					} else {
						uni.showToast({
							title: '复制失败',
							icon: "none"
						});
					}
					// #endif
				}, event)
			}
		},
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style scoped lang="scss">
	.container {
		.tui-header-icon {
			width: 100%;
			position: absolute;
			top: 46rpx;
			padding: 0 12rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;
		}

		.main {
			padding: 30rpx;

			.header {
				display: flex;
				align-items: center;
				margin-bottom: 36rpx;

				.avatar {
					flex: 0 0 110rpx;
					width: 110rpx;
					height: 110rpx;
					margin-right: 24rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.avatar-text {
					.nickname {
						margin-bottom: 16rpx;
						height: 36rpx;
						line-height: 36rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #000;

						.name {
							float: left;
							padding-right: 18rpx;
						}

						.vipLev {
							float: left;
							width: 130rpx;
							height: 36rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.inviteCode {
						font-size: 26rpx;
						color: #999;

						text.codeText {
							padding-right: 10rpx;
						}

						text.codeBtn {
							display: inline-block;
							width: 72rpx;
							height: 36rpx;
							border-radius: 8rpx;
							line-height: 36rpx;
							background: #faefeb;
							text-align: center;
							font-size: 22rpx;
							color: #e7864f;
						}
					}
				}
			}

			.helpSlogn {
				width: 100%;
				height: 80rpx;
				padding: 0 30rpx;
				display: flex;
				-webkit-box-pack: justify;
				-webkit-justify-content: space-between;
				-ms-flex-pack: justify;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				border-radius: 8rpx 8rpx 0 0;
				background: linear-gradient(to right, #fc4250, #fe744b);

				.helpLeft {
					image {
						width: 32rpx;
						height: auto;
						vertical-align: middle;
					}

					text {
						padding-left: 15rpx;
						font-size: 24rpx;
						color: #fff;
						vertical-align: middle;
					}
				}

				.helpInvite {
					width: 120rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 20rpx;
					border: 1px solid #e96c4a;
					background: #fff;
					text-align: center;
					font-size: 20rpx;
					color: #ff5178;
				}
			}

			.navUl {
				.navLi {
					display: flex;
					-webkit-box-pack: justify;
					-webkit-justify-content: space-between;
					-ms-flex-pack: justify;
					justify-content: space-between;
					align-items: center;
					height: 108rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #f9f9f9;

					.navLi-l {
						display: flex;

						.icontit {
							flex: 0 0 40rpx;
							width: 40rpx;
							height: 40rpx;
							margin-right: 24rpx;
							border-radius: 5rpx;
							overflow: hidden;

							image {
								display: block;
								width: 100%;
								height: 100%;
							}
						}

						.title {
							flex: 1;
							font-size: 30rpx;
							color: #000;
						}
					}

					.navLi-icon {
						text {
							font-size: 32px;
							color: #bfbfbf;
						}
					}
				}
			}
		}
	}

	.tui-task-bottom {
		.tui-task {
			padding-bottom: 70rpx;

			.tui-task-title {
				padding-left: 38rpx;
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}

			.taskMain {
				min-height: 428rpx;
				text-align: center;

				.tui-grid-icon {
					width: 90rpx;
					height: 92rpx;
					margin: 0 auto;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.tui-grid-label {
					font-size: 26rpx;
					color: #333;
				}
			}

			.tui-btn-cancle {
				width: 30rpx;
				height: 30rpx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		::v-deep {
			.tui-bottom-popup {
				background: none !important;
			}

			.tui-popup-mask {
				overflow: hidden;
				background: rgba(255, 255, 255, 0.8);
				-webkit-backdrop-filter: saturate(180%) blur(40rpx);
				backdrop-filter: saturate(180%) blur(40rpx);

			}

			.tui-grid::before {
				border-right: none;
			}
		}
	}

	/* 弹动进入 */
	.bounceInUp {
		-webkit-animation: bounceInUp 1s ease both;
		animation: bounceInUp 1s ease both
	}

	@-webkit-keyframes bounceInUp {

		0%,
		100%,
		60%,
		75%,
		90% {
			-webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1)
		}

		0% {
			opacity: 1;
			-webkit-transform: translate3d(0, 100px, 0)
		}

		60% {
			opacity: 1;
			-webkit-transform: translate3d(0, -20px, 0)
		}

		75% {
			-webkit-transform: translate3d(0, 10px, 0)
		}

		90% {
			-webkit-transform: translate3d(0, -5px, 0)
		}

		100% {
			-webkit-transform: translate3d(0, 0, 0)
		}
	}

	@keyframes bounceInUp {

		0%,
		100%,
		60%,
		75%,
		90% {
			transition-timing-function: cubic-bezier(.215, .61, .355, 1)
		}

		0% {
			opacity: 0;
			transform: translate3d(0, 3000px, 0)
		}

		60% {
			opacity: 1;
			transform: translate3d(0, -20px, 0)
		}

		75% {
			transform: translate3d(0, 10px, 0)
		}

		90% {
			transform: translate3d(0, -5px, 0)
		}

		100% {
			transform: translate3d(0, 0, 0)
		}
	}

	.delay100 {
		-webkit-animation-delay: .1s;
		animation-delay: .1s
	}

	.delay180 {
		-webkit-animation-delay: .18s;
		animation-delay: .18s
	}

	.delay200 {
		-webkit-animation-delay: .2s;
		animation-delay: .2s
	}

	.delay300 {
		-webkit-animation-delay: .3s;
		animation-delay: .3s
	}

	.delay400 {
		-webkit-animation-delay: .4s;
		animation-delay: .4s
	}

	.delay500 {
		-webkit-animation-delay: .5s;
		animation-delay: .5s
	}

	.delay600 {
		-webkit-animation-delay: .6s;
		animation-delay: .6s
	}

	.delay700 {
		-webkit-animation-delay: .7s;
		animation-delay: .7s
	}

	.delay800 {
		-webkit-animation-delay: .8s;
		animation-delay: .8s
	}

	.delay900 {
		-webkit-animation-delay: .9s;
		animation-delay: .9s
	}

	.delay1000 {
		-webkit-animation-delay: 1s;
		animation-delay: 1s
	}

	.delay1100 {
		-webkit-animation-delay: 1.1s;
		animation-delay: 1.1s
	}

	.delay1200 {
		-webkit-animation-delay: 1.2s;
		animation-delay: 1.2s
	}

	.delay1300 {
		-webkit-animation-delay: 1.3s;
		animation-delay: 1.3s
	}

	.delay1400 {
		-webkit-animation-delay: 1.4s;
		animation-delay: 1.4s
	}

	.delay1500 {
		-webkit-animation-delay: 1.5s;
		animation-delay: 1.5s
	}

	.delay1600 {
		-webkit-animation-delay: 1.6s;
		animation-delay: 1.6s
	}

	.delay1700 {
		-webkit-animation-delay: 1.7s;
		animation-delay: 1.7s
	}

	.delay1800 {
		-webkit-animation-delay: 1.8s;
		animation-delay: 1.8s
	}

	.delay1900 {
		-webkit-animation-delay: 1.9s;
		animation-delay: 1.9s
	}

	.delay2000 {
		-webkit-animation-delay: 2s;
		animation-delay: 2s
	}

	.delay2200 {
		-webkit-animation-delay: 2.2s;
		animation-delay: 2.2s
	}

	.delay2400 {
		-webkit-animation-delay: 2.4s;
		animation-delay: 2.4s
	}

	.delay2500 {
		-webkit-animation-delay: 2.5s;
		animation-delay: 2.5s
	}

	.delay2600 {
		-webkit-animation-delay: 2.6s;
		animation-delay: 2.6s
	}

	.delay2800 {
		-webkit-animation-delay: 2.8s;
		animation-delay: 2.8s
	}

	.delay3000 {
		-webkit-animation-delay: 3s;
		animation-delay: 3s
	}

	.delay3200 {
		-webkit-animation-delay: 3.2s;
		animation-delay: 3.2s
	}

	.delay3500 {
		-webkit-animation-delay: 3.5s;
		animation-delay: 3.5s
	}

	.delay3800 {
		-webkit-animation-delay: 3.8s;
		animation-delay: 3.8s
	}

	.delay4000 {
		-webkit-animation-delay: 4s;
		animation-delay: 4s
	}

	.delay4200 {
		-webkit-animation-delay: 4.2s;
		animation-delay: 4.2s
	}

	.delay4500 {
		-webkit-animation-delay: 4.5s;
		animation-delay: 4.5s
	}

	.delay5000 {
		-webkit-animation-delay: 5s;
		animation-delay: 5s
	}

	.delay5500 {
		-webkit-animation-delay: 5.5s;
		animation-delay: 5.5s
	}

	.delay6000 {
		-webkit-animation-delay: 6s;
		animation-delay: 6s
	}

	.delay6500 {
		-webkit-animation-delay: 6.5s;
		animation-delay: 6.5s
	}

	.delay7000 {
		-webkit-animation-delay: 7s;
		animation-delay: 7s
	}

	.delay7500 {
		-webkit-animation-delay: 7.5s;
		animation-delay: 7.5s
	}

	.delay8000 {
		-webkit-animation-delay: 8s;
		animation-delay: 8s
	}

	.delay8500 {
		-webkit-animation-delay: 8.5s;
		animation-delay: 8.5s
	}

	.delay9000 {
		-webkit-animation-delay: 9s;
		animation-delay: 9s
	}

	.delay10000 {
		-webkit-animation-delay: 10s;
		animation-delay: 10s
	}
</style>
